<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>马建抖音</title>
    <link rel="stylesheet" href="css/majian.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1460056_muaull0w8an.css">
</head>
<body>
    <div class="box">
        <div class="top1">
            <a href="javascript:;" class="a1">上传视频</a>
            <a href="javascript:;" class="a2">选择音乐</a>
            <a href="javascript:;" class="a1">直接开拍 <span class="iconfont icon-iconfontyoujiantou-copy"></span> </a>
        </div>
        <div class="top2">
            <ul>
                <li>
                    <span class="iconfont icon-sousuo"></span>
                    <input type="text" placeholder="搜索相关音乐内容">
                </li>
            </ul>
        </div>
        <div class="top3">
            <dl>
                <dt> <span class="iconfont icon-heijiao span1"></span> </dt>
                <dd>流行</dd>
            </dl>
            <dl>
                <dt><span class="iconfont icon-yinle-leqi-music-instrume span2"></span></dt>
                <dd>电音趴</dd>
            </dl>
            <dl>
                <dt><span class="iconfont icon-touxiang-copy span3"></span></dt>
                <dd>欧美</dd>
            </dl>
            <dl>
                <dt><span class="iconfont icon-hunyin span4"></span></dt>
                <dd>混音</dd>
            </dl>
        </div>
        <div class="top3 top4">
                <dl>
                    <dt> <span class="iconfont icon-yinle span5"></span> </dt>
                    <dd>流行</dd>
                </dl>
                <dl>
                    <dt><span class="iconfont icon-microphone span6"></span></dt>
                    <dd>电音趴</dd>
                </dl>
                <dl>
                    <dt><span class="iconfont icon-changfanv span7"></span></dt>
                    <dd>欧美</dd>
                </dl>
                <dl>
                    <dt><span class="iconfont icon-more_light span8"></span></dt>
                    <dd>混音</dd>
                </dl>
            </div>
            <div class="top5">
                <img src="img/1.gif" alt="">
            </div>
            <div class="top6">
                <ul>
                    <li style="color: #ff3e5e;">热门歌曲</li>
                    <li>我的收藏</li>
                    <li>本地音乐</li>
                </ul>
            </div>
            <div class="top7">
                <dl>
                    <dt><img src="img/1-2.gif" alt=""></dt>
                    <dd>
                        <a href="javascript:;">陈慧娴</a>
                        <a href="javascript:;">千千阙歌</a>
                        <a href="javascript:;">00:39</a>
                    </dd>
                </dl>
                <div></div>
                <span class="iconfont icon-wujiaoxingxingxing"></span>
            </div>
            <div class="top7">
                    <dl>
                        <dt><img src="img/1-3.gif" alt=""></dt>
                        <dd>
                            <a href="javascript:;">周杰伦</a>
                            <a href="javascript:;">听妈妈的话</a>
                            <a href="javascript:;">00:39</a>
                        </dd>
                    </dl>
                    <div></div>
                    <span class="iconfont icon-wujiaoxingxingxing"></span>
                </div>
                <div class="footer"> <a href="javascript:;">取消</a> </div>
    </div>
</body>
</html>